<template>
    
    <div class="contain">
        <div class="title">
            <titlebox :title="name.title" :imgsrc="name.imgsrc"/>
        </div>
        <!--首页轮播图的结构-->
        <div class="show_produce">
            <h2>大会成果展示</h2>
            <div class="cards">
                <a v-for="product in products" style="text-decoration: none;">
                    <Card :title="product.title" :body="product.body" :img="product.img" class="card"/>
                </a>
            </div>
        </div>
        <div class="com_produce">
            <h2>展商展览</h2>
            <Carousel class="products"/>
        </div>
    </div>
</template>

<script lang="ts" setup name="">
    import Carousel from './carousel/index.vue'
    import titlebox from '@/components/titlebox.vue'
    import Card from './card/index.vue'
    const name = {title:'成果展示', imgsrc:'/src/assets/images/5.png'}
    const products = [{title:'西湖论剑12周年特刊',body:'建没数宇中国是我国的重要国策。在《数宇中国建设整体布局规划〉 (以下简称《规划》)中明确了数字中国建设按照“2522”的整体框架进行布局。',img:'https://obs-xhlj.obs.cn-east-3.myhuaweicloud.com/2023/7/70fe3218d7ae4f58ae91a838ed4d64dd.jpg',url:''},
    {title:'2023数字安全能力洞察报告',body:'数字经济成为全球新一轮科技革命和产业变革的重要引擎，将开启人类数字文明的新时代。数字安全的基础性作用日益突出，在数字化建设进程中，加紧实施国家信息化发展战略，筑牢可信可控的数字安全屏障，夯实数字基础设施安全底座，增强关键基础设施安全韧性，助力数字社会安全发展，已成为支撑现代化建设、增强国家综合实力的必然选择。',img:'https://obs-xhlj.obs.cn-east-3.myhuaweicloud.com/2023/5/8cc23042ae8f4a6e80f25997132d13c0.png',url:''},
    {title:'安恒信息2023年行业解决方案蓝皮书（全6本）',body:'数字安全是未来数字化发展的重要组成部分，立足数字安全建设。备预不虞，为国常道，安恒信息结合多年网络安全、数据安全经验以及对行业发展趋势的理解和把握，安恒信息首次发布六大行业解决方案蓝皮书，全面介绍网信、公安、运营商、金融、教育、交通六大行业中的解决方案最佳实践，为产业数字化发展指明了方向',img:'https://obs-xhlj.obs.cn-east-3.myhuaweicloud.com/2023/5/0bfbde79d1774b43bab8f03d1c75e44c.png',url:''}]

</script>

<style scoped>
    .contain{
        width: 100%;
        .show_produce{
            margin-top: 5vw;
            .cards{
            display: flex;
            justify-content: space-between;   
            height: 50vw;    
                .card{
                    display: flex;
                    justify-content: center;             
                    border-radius: 1.0vw;
                }
                .card:hover{
                    border: 2px solid black;
                }
            }
        }
        .com_produce{
            height: 40vw;
            h2{
                margin-bottom: 2vw;
            }
            .products{
                margin-top: 2vw;
            }
        }  
    }
</style>
